<script setup lang="ts">
defineOptions({
  name: "TodayTask"
});
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartsParent from "@/views/machine/operation/overView/components/chartsParent.vue";
import { useRouter } from "vue-router";
const router = useRouter();

interface Props {
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**  是否暗色，默认为false */
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: "机械科-设备状态",
  dark: false,
  width: 330,
  height: 200,
  boxShadow: false,
  borderRidus: true
});

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const title_height = computed(() => (props.title ? "38px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

const clickHandler = path => {
  if (path == "eqp") {
    router.push({ path: "/all/equip/runManage/record" });
  }
  if (path == "task") {
    router.push({
      path: "/all/equip/runManage/record",
      query: {
        className: "MACHINE"
      }
    });
  }
  if (path == "alarm") {
    router.push({ path: "/all/alert/business" });
  }
  // if (path) {
  //   router.push(path);
  // }

  console.info("功能开发中，敬请期待。。。");
};

const gotoPath1 = () => {
  router.push("/all/equip/epm/task/list");
};
const gotoPath2 = () => {
  router.push("/all/equip/maintain/task");
};
</script>

<template>
  <div class="today-task" :class="{ boxShadow, borderRidus, 'model-title-com-dark': dark }">
    <modelTitle v-if="title" :title="title">
      <div class="model-title-slot">
        <!-- <px-button v-if="button" type="primary" size="small" plain @click="clickHandler">{{ button }}</px-button> -->
        <px-icon class="torouter" color="#3B82F6" @click="clickHandler('task')">
          <ArrowRight />
        </px-icon>
      </div>
    </modelTitle>
    <div class="today-task-com">
      <div class="model_chart" style="width: 100%; height: 100%">
        <chartsParent :width="'100%'" :height="'100%'" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.today-task {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }

    .px-icon {
      cursor: pointer;
    }
  }

  .today-task-com {
    width: 100%;
    height: calc(100% - v-bind(title_height));
  }
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}

.model-title-com-dark {
  color: #fff;
  background-color: #001e3b;
  border: 1px solid #83b2ff;
  box-shadow: inset 0 0 10px 0 #83b2ff;

  .title-text {
    color: #fff !important;
  }

  :deep(.model-title-com) {
    border-color: #00c2ff !important;
  }
}
</style>
